<template>
    <div>
        <div class="top-con">
            <div class="title">数字化农村管理平台</div>
            <div class="tab-list">
                <div @click="go('/baseHome')" :class="{ active: route.fullPath == '/baseHome' }" class="tab">基地主页</div>
                <div @click="go('/land')" :class="{ active: route.fullPath == '/land' }" class="tab">宗地管理</div>

                <div @click="go('/env')" :class="{ active: route.fullPath == '/env' }" class="tab">基地环境</div>
                <div @click="go('/dapeng')" :class="{ active: route.fullPath == '/dapeng' }" class="tab">大棚环境</div>
            </div>

        </div>
    </div>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()

const go = (url: string) => {
    router.push({
        path: url
    })
}
</script>
<style scoped>
.top-con {
    display: flex;
    align-items: center;
    height: 6.5vh;
    background: #03a90dee;
}

.title {
    width: 24vw;
    height: 7.8vh;
    background: url(../assets/img/11.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 1.6vw;
    font-weight: bold;
}
.tab-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 53vw;
}
.tab {
    width: 6.1vw;
    height: 3.8vh;
    background: #6acb70;
   
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #004202;
    font-size: 0.8vw;
    cursor: pointer;
}

.tab.active {
   
    background: linear-gradient(to bottom, #00000033, #00000000, #00000033);
   
    color: #fff;
}
</style>